<template>
    <div class="scroll_box">
        <i class="el-icon-warning-outline"></i>
        <div class="scrollText" ref="outer">
            <div class="st-inner" :class="{ 'st-scrolling': needToScroll }">
                <span class="st-section" ref="inner">{{ text }}</span>
                <span class="st-section" v-if="needToScroll">{{ text }}</span>
                <!-- 加两条是为了滚动的时候实现无缝衔接 -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            needToScroll: false,
            text: "",
        };
    },
    mounted() {
        this.startCheck();
    },
    beforeDestroy() {
        this.stopCheck();
    },
    methods: {
        // 检查当前元素是否需要滚动
        check() {
            this.setText();
            this.$nextTick(() => {
                let flag = this.isOverflow();
                this.needToScroll = flag;
            });
        },

        // 判断子元素宽度是否大于父元素宽度，超出则需要滚动，否则不滚动
        isOverflow() {
            let outer = this.$refs.outer;
            let inner = this.$refs.inner;
            let outerWidth = this.getWidth(outer);
            let innerWidth = this.getWidth(inner);
            return innerWidth > outerWidth;
        },
        // 获取元素宽度
        getWidth(el) {
            let { width } = el.getBoundingClientRect();
            return width;
        },
        // 获取到父组件传过来的内容复传给this.text
        setText() {
            this.text =
                (this.$slots.default &&
                    this.$slots.default.reduce((res, it) => res + it.text, "")) ||
                "";
        },
        // 增加定时器，隔一秒check一次
        startCheck() {
            this._checkTimer = setInterval(this.check, 5000);
            this.check();
        },
        // 关闭定时器
        stopCheck() {
            clearInterval(this._checkTimer);
        },
    },
};
</script>
<style lang="less" scoped>
.scroll_box {
    padding: 4px 8px;
    background: #fff4d8;
    font-size: 14px !important;
    border-radius: 0 0 4px 4px;
    display: flex;

    /deep/ .el-icon-warning-outline {
        display: flex;
        align-items: center;
        font-size: 16px;
        margin-right: 14px;
        color: #5aa7ff;
    }
}

.scrollText {
    font-size: 18px !important;
    margin-right: 20px;
    white-space: nowrap;
    overflow: hidden;
}

.st-inner {
    font-size: 16px !important;
    display: inline-block;
}

.st-scrolling .st-section {
    padding: 0 2px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px !important;
    line-height: 0.15rem;
    color: #333;
}

// 向左匀速滚动动画
.st-scrolling {
    animation: scroll 55s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}
</style>
